<template>
    <scroll-view :scroll-x="true" scroll-with-animation :class="{ nobg: nobg, setbg: setbg }" :scroll-into-view="intoIndex" :show-scrollbar="false">
        <view class="tabs" :class="{ nobg: nobg, setbg: setbg }">
            <view
                v-for="(tab, index) in tabs"
                class="tab-item"
                :class="tabIndex == index && 'active'"
                @click="clickTab(tab, index)"
                :key="index"
                :id="'text' + index">
                <text class="tab-item-text">{{ tab.title?tab.title:tab.Name }}</text>
                <view class="line"></view>
            </view>
        </view>
    </scroll-view>
</template>

<script>
export default {
    props: ["tabIndex", "tabs", "nobg", "setbg"],
    data() {
        return {
            intoIndex: "",
        }
    },
    watch: {
        tabIndex(newdata, olddata) {
            if (newdata > olddata) {
                if (this.tabIndex > 3) {
                    this.intoIndex = "text" + this.tabIndex
                }
            } else {
                if (this.tabIndex < this.tabs.length - 3) {
                    this.intoIndex = "text" + this.tabIndex
                }
            }
            this.$forceUpdate()
        },
    },
    mounted() {},
    methods: {
        clickTab(item, index) {
            this.$emit("clickTab", index)
        },
    },
}
</script>

<style lang="scss">
.tabs {
    display: flex;
    justify-content: flex-start;
    padding: 10rpx 10rpx 0;
    background: $color-white;
    .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        color: grey;
        font-size: $app-tab-text-size;
        font-weight: 500;
        height: 78rpx;
        box-sizing: border-box;
        position: relative;
        margin: 0 40rpx;
        .tab-item-text {
            display: flex;
            flex: 1;
            height: 70rpx;
            align-items: center;
            justify-content: center;
            padding: 0 10rpx 4rpx;
            font-weight: 400;
            font-size: $font-size-30;
            font-weight: 700;
        }

        .line {
            // position: absolute;
            width: 50rpx;
            height: 8rpx;
            border-radius: 20rpx;
            background: rgba(0, 0, 0, 0);
        }

        &.active {
            .tab-item-text {
                color: $app-color-main;
                font-weight: 700;
                // border-bottom: 8rpx solid $app-color-main;
            }
            .line {
                border-radius: 20rpx;
                background: $app-color-main;
            }
        }
    }
}
.nobg {
    background: none;
}

.setbg {
    background: $app-color-main;
    padding-bottom: 14rpx;
    .tab-item {
        .tab-item-text {
            display: flex;
            flex: 1;
            height: 70rpx;
            align-items: center;
            justify-content: center;
            padding: 0 10rpx 4rpx;
            font-weight: 400;
            color: #ffffff;
            font-size: $font-size-30;
            // font-weight: 700;
        }
        &.active {
            .tab-item-text {
                color: #ffffff;
                font-weight: 700;
            }
            .line {
                border-radius: 20rpx;
                background: #ffffff;
            }
        }
    }
}
</style>
